<template>
  <div class="w-full h-[100vh] relative">
    <div class="text-xl text-[var(--theme-font-color)] font-SemiBold pt-[28px] s4k:text-[48px]">
      <span class="pl-[16px] s4k:pl-[32px]">Activity Log</span>
      <div
        class="flex flex-row justify-start items-center mt-[20px] pl-[16px] s4k:mt-[40px] s4k:pl-[32px]"
      >
        <div class="w-[23.177vw] flex flex-row justify-between items-center h-[37px] s4k:h-[74px]">
          <fwb-input
            v-model="searchCamera"
            placeholder="Search"
            id="searchCamera"
            style="width: 100%"
          >
            <template #prefix>
              <svg
                aria-hidden="true"
                class="w-5 h-5 text-gray-500 dark:text-gray-400 s4k:w-7 s4k:h-7"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                />
              </svg>
            </template>
          </fwb-input>
          <button
            class="w-[90px] h-[38px] bg-[var(--theme-button-bg)] text-white border-solid rounded-r-md border-[var(--grid)] border-[1px] cursor-pointer text-[1.13rem]
              s4k:w-[180px] s4k:h-[76px] s2k:w-[120px] s2k:h-[50.6px] s2k:rounded-r-[8px]">
            Search
          </button>
        </div>
        <button
          class="cursor-pointer w-[98px] h-[38px] border-solid border-[var(--grid)] border-[1px] rounded-md flex flex-row justify-evenly items-center ml-[10px] bg-[var(--theme)] s4k:w-[196px] s4k:h-[76px] s4k:ml-[20px] s2k:w-[130.6px] s2k:h-[50.6px] s2k:ml-[13.3px] s2k:rounded-[8px]"
          @click="show"
        >
          <svg-icon name="filter" width="12px" height="12px" class="svgClass s2ksvg s4ksvg"></svg-icon>
          <div class="text-[1.13rem] text-[#9CA3AF] font-Medium ">Filter</div>
          <svg-icon
            name="down"
            width="10.8px"
            height="18px"
            :class="['svgClass s2ksvg s4ksvg', { 'svgRotate': filterShow }]"
          ></svg-icon>
        </button>
      </div>
      <div>
        <Table ref="tableRef"></Table>
      </div>
    </div>
    <div
      v-show="filterShow"
      class="absolute left-[471px] top-[125px] w-[28.958vw] h-[345px] bg-[var(--theme)] z-50 rounded-md border-solid border-[1px] border-[var(--grid)]
       s4k:left-[941px] s4k:top-[220px] s4k:h-[690px] s2k:left-[621px] s2k:top-[140px] s2k:h-[425px]">
      <div class="text-[#6B7280] text-[1rem] font-SemiBold mt-[20px] pl-[16px] s4k:mt-[40px] s4k:pl-[32px] s2k:mt-[26.6px] s2k:pl-[21.3px]">
        DATE RANGE
      </div>
      <div
        class="w-[calc(100%_-_32px)] m-auto flex flex-row justify-between items-center mt-[16px] mb-[4px] s4k:w-[calc(100%_-_64px)] s4k:mt-[32px] s4k:mb-[8px] s2k:w-[calc(100%_-_42.6px)] s2k:mt-[21.3px] s2k:mb-[5.3px]">
        <span class="flex-[1] text-[1rem] text-[var(--theme-font-color)]">Start</span>
        <span
          class="flex-[1] text-[1rem] text-[var(--theme-font-color)] ml-[20px] s4k:text-[24px] s4k:ml-[40px] s2k:ml-[26.6px]">From</span>
      </div>
      <div class="w-[calc(100%_-_32px)] m-auto flex flex-row justify-between items-center s4k:w-[calc(100%_-_64px)] s2k:w-[calc(100%_-_42.6px)]">
        <div class="flex-[1] flex flex-row justify-start items-center">
          <div class="startTimeDate w-[58%] relative h-[37px] s4k:w-[304px] s4k:h-[74px]">
            <svg-icon name="date" width="16px" height="16px"
                      class="svgDate s2ksvg s4ksvg absolute left-[10px] top-[50%] transform -translate-y-1/2 z-[100] s4k:left-[20px] s4k:top-[35%] s2k:top-[45%]"></svg-icon>
            <a-date-picker v-model:value="FilterData.startTimeDate" placeholder=""/>
          </div>
          <div class="w-[42%] h-[38px] relative ml-[5px] s4k:w-[202px] s4k:h-[76px] s4k:ml-[10px] s2k:ml-[13px]">
            <svg-icon name="time" width="20px" height="20px"
                      class="svgDate s2ksvg s4ksvg absolute left-[10px] top-[50%] transform -translate-y-1/2 z-[100] s4k:left-[20px] s4k:top-[35%] s2k:top-[45%]"></svg-icon>
            <a-time-picker v-model:value="FilterData.startTimeHM" format="HH:mm" :allowClear="false" placeholder=""/>
          </div>
        </div>
        <div class="flex-[1] flex flex-row justify-start items-center ml-[20px] s4k:ml-[30px]">
          <div class="startTimeDate w-[58%] relative h-[37px] s4k:w-[304px] s4k:h-[74px]">
            <svg-icon name="date" width="16px" height="16px"
                      class="svgDate s2ksvg s4ksvg absolute left-[10px] top-[50%] transform -translate-y-1/2 z-[100] s4k:left-[20px] s4k:top-[35%] s2k:top-[45%]"></svg-icon>
            <a-date-picker v-model:value="FilterData.endTimeDate" placeholder=""/>
          </div>
          <div class="w-[42%] h-[38px] relative ml-[5px] s4k:w-[202px] s4k:h-[76px] s4k:ml-[10px] s2k:ml-[13px]">
            <svg-icon name="time" width="20px" height="20px"
                      class="svgDate s2ksvg s4ksvg absolute left-[10px] top-[50%] transform -translate-y-1/2 z-[100] s4k:left-[20px] s4k:top-[35%] s2k:top-[45%]"></svg-icon>
            <a-time-picker v-model:value="FilterData.endTimeHM" format="HH:mm" :allowClear="false" placeholder=""/>
          </div>
        </div>
      </div>
      <div
        class="w-[calc(100%_-_32px)] m-auto h-[1px] bg-[var(--grid)] my-[16px] s4k:w-[calc(100%_-_64px)] s4k:my-[32px] s2k:w-[calc(100%_-_42.6px)] s2k:my-[21.3px]"></div>
      <div class="text-[#6B7280] text-[1rem] font-SemiBold pl-[16px] s4k:pl-[32px] s2k:pl-[21.3px]">
        EVENT TYPE
      </div>
      <div
        id="radio"
        class="w-[calc(100%_-_32px)] m-auto flex flex-wrap justify-between mt-[10px] s4k:w-[calc(100%_-_64px)] s4k:mt-[20px] s2k:w-[calc(100%_-_42.6px)] s2k:mt-[13.3px]">
        <div class="w-[48%] flex flex-row justify-start items-center">
          <fwb-radio v-model="FilterData.picked" label="All " value="1" />
        </div>
        <div class="w-[48%] flex flex-row justify-start items-center">
          <fwb-radio v-model="FilterData.picked" label="User Configuration Changed" value="2" />
        </div>
        <div class="w-[48%] flex flex-row justify-start items-center">
          <fwb-radio v-model="FilterData.picked" label="User Login" value="3" />
        </div>
        <div class="w-[48%] flex flex-row justify-start items-center">
          <fwb-radio v-model="FilterData.picked" label="Camera Configuration changed" value="4" />
        </div>
        <div class="w-[48%] flex flex-row justify-start items-center">
          <fwb-radio v-model="FilterData.picked" label="User Logout" value="5" />
        </div>
        <div class="w-[48%] flex flex-row justify-start items-center">
          <fwb-radio v-model="FilterData.picked" label="Hard Disk Failure" value="6" />
        </div>
      </div>
      <div
        class="w-[calc(100%_-_32px)] m-auto h-[1px] bg-[var(--grid)] my-[16px] s4k:w-[calc(100%_-_64px)] s4k:my-[32px]"
      ></div>
      <div
        class="w-[108px] h-[37px] bg-[var(--theme-search-bg)] border border-[var(--grid)] border-solid rounded-md text-center leading-[37px] text-md text-[var(--theme-font-color)] cursor-pointer ml-[16px] s4k:w-[216px] s4k:h-[74px] s4k:leading-[74px] s4k:text-[28px] s4k:ml-[32px]"
        @click="ApplyFilters"
      >Apply Filters</div>
    </div>
    <div class="mask" v-show="maskShow" @click="back"></div>
  </div>
</template>

<script setup name="Log">
import moment from "moment";
import Table from "./table.vue";
import { onMounted, reactive, ref, watch } from "vue";
import { FwbInput, FwbRadio } from "flowbite-vue";
const searchCamera = ref("");
const filterShow = ref(false);
const maskShow = ref(false); // 遮罩层
const back = () => {
  filterShow.value = false;
  maskShow.value = false;
};
const ApplyFilters = () => {
  console.log("FilterData", FilterData);
  back();
};
const show = () => {
  filterShow.value = true;
  maskShow.value = true;
};
const FilterData = reactive({
  startTimeDate: "", // moment('2024/01/01', 'YYYY/MM/DD')
  startTimeHM: "", // moment('00:00', 'HH:mm')
  endTimeDate: "", // moment('2024/02/01', 'YYYY/MM/DD')
  endTimeHM: "", // moment('00:00', 'HH:mm')
  picked: "first"
});
</script>

<style scoped lang="scss">
#searchCamera {
  padding: 0;

  :deep(input) {
    padding-top: 0;
    padding-bottom: 0;
    height: 36px;
    background-color: var(--theme);
    border: solid var(--grid) 1px;
    font-size: 1.13rem;
    font-family: Medium;
    color: var(--theme-font-color);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;

    &:focus {
      box-shadow: inset 0 0;
    }
  }
}

.svgRotate {
  transition: all 0.2s;
  transform: rotate(180deg);
}

.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

#input {
  color: var(--theme-font-color);
  font-size: 1.13rem;
  border-radius: 10px;
  border: solid 1px var(--grid);

  &:focus {
    outline: none;
    box-shadow: inset 0 0;
    border: solid 1px var(--grid);
  }
}

#radio {
  :deep(label) {
    width: auto;

    input {
      border: solid 1px var(--grid);
      background-color: var(--inputBg);
      cursor: pointer;
      height: 16px;
      width: 16px;
      &:checked {
        border: solid 4px #1c64f2;
        background-color: var(--theme-font-color);
        // border-color: #111928;
      }

      &:focus {
        box-shadow: inset 0 0;
      }
    }

    .text-sm {
      color: var(--theme-font-color);
      font-size: 1.13rem;
      font-family: Medium;
    }
  }
}
.ant-picker {
  width: 101px;
  height: 37px;
  background-color: var(--theme);
  border: solid 1px var(--grid);
  border-radius: 10px;

  :deep(input) {
    padding-left: 25px;
    color: var(--theme-font-color) !important;
  }

  :deep(svg) {
    display: none;
  }
}
.startTimeDate {
  .ant-picker {
    width: 152px;
    height: 37px;
    background-color: var(--theme);
    border: solid 1px var(--grid);
    border-radius: 10px;
    :deep(input) {
      padding-left: 25px;
      color: var(--theme-font-color) !important;
    }
    :deep(svg) {
      display: none;
    }
  }
}
@media screen and (min-width: 2560px) {
  .s2ksvg {
    transform: scale(1.2);
  }
  #searchCamera {
    :deep(input) {
      height: 48px;
      padding-left: 40px;
    }
  }

  #radio {
    :deep(label) {
      input {
        width: 21.3px;
        height: 21.3px;

        &:checked {
          border: solid 5.3px #1C64F2;
        }
      }
    }
  }
  .ant-picker {
    width: 130px;
    height: 49.3px;
  }
  .startTimeDate {
    .ant-picker {
      width: 190px;
      height: 49.3px;
    }
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg {
    transform: scale(1.8) !important;
  }
  #searchCamera {
    :deep(input) {
      height: 72px;
      padding-left: 80px;
    }
  }

  #radio {
    :deep(label) {
      input {
        width: 32px;
        height: 32px;
        &:checked {
          border: solid 8px #1c64f2;
        }
      }
    }
  }
  .ant-picker {
    width: 202px;
    height: 74px;
    padding-left: 30px;
    :deep(input){
      font-size: 22px;
    }
  }
  .startTimeDate {
    .ant-picker {
      width: 304px;
      height: 74px;
    }
  }
}
</style>
<style lang="scss">
.datepicker-picker {
  background-color: var(--theme-ant-picker);

  button {
    background-color: var(--theme-ant-picker) !important;
    color: var(--theme-font-color);

    &:hover {
      background-color: var(--theme);
    }

    svg {
      color: var(--theme-font-color);
    }
  }

  span {
    color: var(--theme-font-color);

    &:hover {
      background-color: var(--theme);
    }
  }

  .dow {
    color: #929aa5;

    &:hover {
      background-color: var(--theme-ant-picker);
    }
  }
}
.ant-picker-dropdown {
  background-color: var(--theme-ant-picker);
  border-radius: 10px;
  .ant-picker-panel-container {
    background-color: var(--theme-ant-picker);
    .ant-picker-time-panel-cell-inner {
      color: var(--theme-font-color) !important;
    }
    .ant-picker-footer .ant-picker-ok span {
      color: #fff !important;
    }
  }
  button {
    color: var(--theme-font-color) !important;
    border: solid #1677ff 1px !important;
    background-color: #1677ff !important;
  }
}
.ant-picker-dropdown
.ant-picker-time-panel-column
> li.ant-picker-time-panel-cell-selected
.ant-picker-time-panel-cell-inner {
  background-color: var(--theme) !important;
}
.ant-picker-cell-inner {
  color: var(--theme-font-color) !important;
}
.ant-picker-dropdown
.ant-picker-cell-in-view.ant-picker-cell-today
.ant-picker-cell-inner {
  color: #fff !important;
  background-color: #1a56db;
  &::before {
    border: solid #1a56db 1px;
  }
  &:hover {
    background-color: #1a56db !important;
  }
}
.ant-picker-header {
  button {
    background-color: var(--theme-ant-picker) !important;
    border: solid 1px var(--theme-ant-picker) !important;
  }
}
.ant-picker-content th {
  color: #929aa5 !important;
}
</style>
